<template>
    <a-dropdown :trigger="['contextmenu']">
        <div class="home-wrap">
            <!-- 设置面板 -->
            <a-modal title="设置面板" v-model:visible="setting.state" @ok="settingOk">
                <a-form layout="vertical">
                    <a-form-item label="设置KEY">
                        <a-input v-model:value="setting.form.key" placeholder="请输入KEY"/>
                    </a-form-item>
                    <a-form-item label="设置插件ID">
                        <a-input v-model:value="setting.form.exId" placeholder="请输入插件ID"/>
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--背景-->
            <Background></Background>
            <!-- 设置抽屉 -->
            <SettingLayout></SettingLayout>
            <!-- 主题 -->
            <div class="skin-wrap" v-if="store.lock == 'open'">
                <Default v-if="store.skin.value=='default'"></Default>
                <First v-if="store.skin.value=='first'"></First>
                <List v-if="store.skin.value=='listSkin'"></List>
                <Demo v-if="store.skin.value=='demo'"></Demo>
            </div>
        </div>
        <!-- 右键菜单 -->
        <template #overlay>
            <a-menu @click="menuClick">
                <a-menu-item key="refresh">
                    <icon-font type="icon-refresh"/>
                    <span>刷新</span>
                </a-menu-item>
                <li class="ant-dropdown-menu-item-divider"></li>
                <a-menu-item key="engine" v-if="store.token">
                    <icon-font type="icon-search"/>
                    <span>管理引擎</span>
                </a-menu-item>
                <a-menu-item key="bookmark" v-if="store.token">
                    <icon-font type="icon-website"/>
                    <span>管理书签</span>
                </a-menu-item>
                <li class="ant-dropdown-menu-item-divider" v-if="store.token"></li>
                <a-menu-item key="next" v-if="store.background.state && store.background.value == 'main'">
                    <icon-font type="icon-wallpaper"/>
                    <span>更换壁纸</span>
                </a-menu-item>
                <a-menu-item key="setting">
                    <icon-font type="icon-setting"/>
                    <span>设置面板</span>
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>

<script>
    import {useStore} from "vuex";
    import {account} from "/src/config/env";
    import website from "/src/config/website";
    import {getStorage, clearStorage, getConfig} from "/src/util";

    import Background from '/src/components/Background.vue';
    import SettingLayout from '/src/components/setting/Layout.vue';
    // 主题
    import Default from '/src/components/skin/default/Home.vue';
    import First from '/src/components/skin/first/Home.vue';
    import List from '/src/components/skin/list/Home.vue';
    import Demo from '/src/components/skin/demo/Home.vue';

    // iconfont
    import {createFromIconfontCN} from '@ant-design/icons-vue';

    const IconFont = createFromIconfontCN({scriptUrl: website.iconfontUrl});

    export default {
        name: "home",
        components: {
            IconFont,
            Background,
            SettingLayout,

            Default,
            First,
            List,
            Demo,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,

                setting: {
                    state: false,
                    form: {
                        key: getStorage(website.key),
                        exId: getStorage(website.exId),
                    }
                }
            }
        },
        // DOM未渲染前调用
        created() {
            this.monitorKeyboard();
        },
        // 方法
        methods: {
            // 键盘监听
            monitorKeyboard() {
                let that = this;
                // 监听键盘
                document.onkeydown = function (e) {
                    let evt = window.event || e,
                        code = evt.keyCode || evt.which,
                        altKey = e.altKey;
                    // console.log('onkeydown', code);

                    // 刷新: F5
                    if (code == 116) {
                        clearStorage();
                    }
                    // 设置key + exid: F2
                    else if (code == 113) {
                        that.setting.state = !that.setting.state;
                    }
                    // 锁屏: (Alt + 1)
                    else if (altKey && code == 49) {
                        if (account) {
                            that.$store.commit('setLock', true);
                        } else {
                            that.$message.warning('未开启锁屏功能');
                        }
                    }
                    // 下一张壁纸: (Alt + 2)
                    else if (altKey && code == 50) {
                        that.$store.commit('setEvent', 'next');
                    }
                    // 设置面板: (Alt + 3)
                    else if (altKey && code == 51) {
                        that.$store.dispatch('switchSettingPanel');
                    }
                };
                // 阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作。
                history.pushState(null, null, window.location.href);
                window.addEventListener("popstate", function () {
                    history.pushState(null, null, window.location.href);
                });
            },
            // 设置面板
            settingOk() {
                let that = this,
                    form = that.setting.form,
                    key = form.key,
                    exId = form.exId;
                if (!key) {
                    that.$message.warning('请设置KEY');
                    return false;
                }
                if (key.length < 6) {
                    that.$message.warning('KEY长度至少6位');
                    return false;
                }
                if (!exId) {
                    that.$message.warning('请设置EXID');
                    return false;
                }
                that.$store.commit('setKey', key);
                that.$store.commit('setExId', exId);
                clearStorage();
                that.$store.dispatch('getAllData');
                that.setting.state = !that.setting.state;
            },
            // 右键下拉菜单点击事件
            menuClick(e) {
                let that = this,
                    key = e.key;
                // console.log('menuClick', key);
                // 刷新数据
                if (key == 'refresh') {
                    that.$store.dispatch('getAllData');
                }
                // 引擎管理
                else if (key == 'engine') {
                    that.$router.push('/user/manage-engine');
                }
                // 网站管理
                else if (key == 'bookmark') {
                    that.$router.push('/user/manage-bookmark');
                }
                // 下一张壁纸
                else if (key == 'next') {
                    that.$store.commit('setEvent', key);
                }
                // 设置
                else if (key == 'setting') {
                    that.$store.commit('openSettingPanel');
                }
            },
        },
        // 监听
        watch: {
            // 监听KEY变化
            '$store.state.key'(val) {
                this.setting.form.key = val;
            },
        }
    }
</script>

<style lang="less" scoped>
    .home-wrap {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;

        .skin-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
        }
    }
</style>
